<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>filter</title>
<script src='../lib/jquery-2.1.1.js'></script>
<script>
$(document).ready(function(){
/* 	div 태그 중 class 속성값이 div1인 요소들의 border, with,text-align,padding 을 설정 */
	
	$('div[class=div1]').css({
		'width':'150px',
		'border':'2px solid #ff0000',
		'text-align':'center',
		'padding':'20px',
		'display':'inline-block'
	});
	//ul 태그 중 id가 mnt인 요소들의 짝수번째 항목의 글자색을 파란색으로
	$('#mnt>li:even').css('color','#0000ff');
	
	
	//ul 태그 중 id가 river인 요소들 중 첫번째와 마지먹번째의 글자색을 빨간색으로
	$('#river>li:first,#river>li:last').css('color','#ff0000');
	
	//ul태그중 중 첫번째 자식요소의 문자를 굵게 처리
	
	$('ul>li:first-child').css('font-weight','bold');
	
});
</script>


</head>
<body>
<div class='div1'>00000</div>
<div class='div1'>11111</div>
<div class='div1'>22222</div>
<div class='div1'>33333</div>
<div class='div1'>44444</div>

<div>
	<ul id='mnt'>
		<li>백두산</li>
		<li>한라산</li>
		<li>지리산</li>
		<li>내장산</li>
		<li>치악산</li>	
	</ul>
</div>


<div>
	<ul id='river'>
		<li>한강</li>
		<li>낙동강</li>
		<li>금강</li>
		<li>두만강</li>
		<li>동강</li>	
	</ul>
</div>



</body>
</html>